<template>
    <ui-popup :status="status" :style="popupStyle" @close="popupClose">
        <div class="popup-unlike" ref="popup" :class="{'up':isUp,'down':!isUp}" :style="style">
            <i :style="careStyle"></i>
            <div class="main">
                <div class="items">
                    <a href="javascript:;" :class="{'on': poor_quality}" @click="poor_quality = !poor_quality">内容质量差</a>
                    <a href="javascript:;" :class="{'on': repeat}" @click="repeat = !repeat">重复、旧闻</a>
                    <a href="javascript:;" :class="{'on': source}" v-if="item.source!=''" @click="source = !source">来源: {{item.source}}</a>
                </div>
                <div class="action">
                    <span>
                        <template v-if="count == 0">选出理由，为您优化</template>
                        <template v-else>已选择<label>{{count}}个</label>理由</template>
                    </span>
                    <a href="javascript:;" @click="post">不感兴趣</a>
                </div>
            </div>
        </div>
    </ui-popup>
</template>
<script>
import Popup from "./popup.vue";
export default {
    name: "popup-unlike",
    components: {
        [Popup.name]: Popup
    },
    computed:{
        count(){
            let i = 0;
            this.poor_quality && i++;
            this.repeat && i++;
            this.source && i++;
            return i;
        }
    },
    data() {
        return {
            popupStyle:{
                visibility:'hidden',
            },
            style:{
                top:0,
            },
            careStyle:{
                left:0
            },
            isUp:false,
            status:false,
            poor_quality:false,
            repeat:false,
            source:false,
            loading:false,
            item:{},
            list:[],
            index:'',
        };
    },
    mounted() {
        /** param
         *      rect,
                list,
                index
         */
        this.$on('show',param=>{
            this.status = true;
            this.item = param.list[param.index];
            this.list = param.list;
            this.index = param.index;

            this.$nextTick(()=>{
                let elRect = this.$refs.popup.getBoundingClientRect();
                let winH = window.innerHeight;
                this.isUp= winH - param.rect.y < 230
                if(this.isUp){
                    this.style.top = param.rect.top - elRect.height - lib.flexible.rem2px(.5) + 'px';
                }else{
                    this.style.top = param.rect.top + lib.flexible.rem2px(.5) + 'px';
                }
                this.careStyle.left = param.rect.x - (param.rect.width/2) + lib.flexible.rem2px(.05) + 'px';
                this.popupStyle.visibility = 'visible'
            })
            
        });

        this.$on('hide',()=>{
            this.popupStyle.visibility = 'hidden';
            this.poor_quality = false;
            this.repeat = false;
            this.source = false;
            this.item = {};
            this.list = [];
            this.index = ''
            this.status = false;
        })
    },
    methods: {
        popupClose(e) {
            this.$emit('hide');
            this.$emit("close");
        },
        post(){
            if(this.loading) return;
            this.loading = true;
            let params = {
                news_id:this.item.id
            }

            if(this.poor_quality){
                params.poor_quality = 1;
            }

            if(this.repeat){
                params.repeat = 1;
            }

            if(this.source){
                params.source = this.item.source
            }
            return this.$http.post('?ct=news&ac=uninterest',params).then(response=>{
                let {data} = response;
                if(data.code != 0) {
                    this.$toast(data.msg);
                }else{
                    this.$utils.unlike.set(this.item.id);
                    this.list.splice(this.index, 1);
                    this.$emit('hide');
                }
            }).catch(e=>{
                console.error(e);
                this.$toast('操作失败');
            }).finally(()=>{
                this.loading = false;
            })
        }
    }
};

</script>

<style lang="less">
.popup-unlike {
    position: absolute;
    left:0;
    right:0;
    margin:auto;
    width:702px;
    z-index:1;

    font-size:28px;
    &.up>i {
        border-top:10px solid #fff;
        bottom:0;
        transform: translateY(90%);

    }
    &.down>i {
         top:0;
         transform: translateY(-90%);
         border-bottom:10px solid #fff;
    }
    &>i {
        position:absolute;
        border-left:10px solid transparent;
        border-right:10px solid transparent;
    }
    .main {
        width:100%;
        border-radius:4px;
        background-color:#fff;
    }
    .items {
        padding:2px 30px 30px;
    }
    .items a {
        display:inline-block;
        padding:0 24px;
        color:#282828;
        height: 56px;
        line-height: 54px;
        border:1px solid #e2e2e2;
        border-radius:4px;
        margin-right:22px;
        margin-top:28px;
        &:last-child {
            margin-right: 0;
        }
        &.on {
            color:#e64a19;
            border-color:#e64a19;
        }
    }
    .action {
        border-top:1px solid #e2e2e2;
        padding:0 30px;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            flex:1;
            color:#666;

            label {
                color:#e64a19
            }
        }

        a {
            margin-left:24px;
            display: block;
            flex-shrink: 0;
            flex-grow: 0;
            width:184px;
            height:56px;
            border-radius:4px;
            background-color:#e64a19;
            color:#fff;
            text-align: center;
            line-height: 56px;
        }
    }
}
</style>
